
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />

    <title>DynamicForm</title>
    <meta name="description" content="Dynamic Form" />

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">
	  google.load("jquery", "1.4.2");
	  google.load("jqueryui", "1.8.6");
	</script>
	<script type="text/javascript" src="assets/jquery/jquery.corner.js?v2.01"></script>
	<script type="text/javascript" src="assets/jquery/jquery.contextmenu.js"></script>

	
	<link rel="stylesheet" type="text/css" href="assets/swiftuidesigner/stylesheets/ui.css" media="all" />
	<link rel="stylesheet" type="text/css" href="assets/swiftuidesigner/stylesheets/demo.css" media="all" />
	<link rel="stylesheet" href="assets/swiftuidesigner/stylesheets/flora.css" type="text/css" media="" />
	<link rel="stylesheet" href="assets/swiftuidesigner/stylesheets/flora_002.css" type="text/css" />
	<link rel="stylesheet" type="text/css" href="assets/swiftuidesigner/stylesheets/style.css" media="all" />	
	<link rel="stylesheet" type="text/css" href="assets/swiftuidesigner/stylesheets/jquery.contextmenu.css" media="all" />	
	
	
	
<script>
var count = 1;
var menu = [
	{ 'Show an alert': function() { alert('This is an alert!'); } },
	{ 'Turn me red (try it)': function() { this.style.backgroundColor='red'; } },
	{ '<b>HTML</b> <i>can be</i> <u>used in</u> <input type="text" value="test"/>': 
	function(menuItem,cmenu,e) {
			$t = $(e.target);
			return false;
		} },
	$.contextMenu.separator,
	{ 'Just above me was a separator!':function(){} },
	{ 'Option with icon (for themes that support it)':
		{
			onclick:function(){},
			icon:'i_save.gif'
		}
	},
	{'Disabled option':
		{
			onclick:function(){},
			disabled:true
		}
	},
	{'<div><div style="float:left;">Choose a color (don\'t close):</div><div class="swatch" style="background-color:red"></div><div class="swatch" style="background-color:green"></div><div class="swatch" style="background-color:blue"></div><div class="swatch" style="background-color:yellow"></div><div class="swatch" style="background-color:black"></div></div><br>':
		function(menuItem,cmenu,e) {
			$t = $(e.target);
			if ($t.is('.swatch')) {
				this.style.backgroundColor = $t.css('backgroundColor');
				$t.parent().find('.swatch').removeClass('swatch-selected');
				$t.addClass('swatch-selected');
			}
			return false;
		}
	},
	{'Use fadeOut for hide transition':function(menuItem,cmenu) { cmenu.hideTransition='fadeOut'; cmenu.hideSpeed='fast'; } },
	{'Use slideUp for hide transition (quirky in IE)':function(menuItem,cmenu) { cmenu.hideTransition='slideUp'; } },
	{'Use normal hide transition':function(menuItem,cmenu) { cmenu.hideTransition='hide'; } },
	{'Increments each time menu is displayed using beforeShow hook: #<span class="option-count">1</span>': function() { } },
	{'Custom menu item class and hover class for this item only':
		{
			onclick:function() { },
			className:'context-menu-item-custom',
			hoverClassName:'context-menu-item-custom-hover'
		}
	}
];
	var beforeShowFunc = function() {
		var $menu = this.menu;
		$menu.find('.option-count').html(count++);
	}
    $(document).ready(function(){
		//$('.menu-default').contextMenu(menu,{beforeShow:beforeShowFunc});
		//$('.menu-xp').contextMenu(menu,{theme:'xp',beforeShow:beforeShowFunc});
		$(".menu-vista").contextMenu(menu,{theme:'vista',beforeShow:beforeShowFunc});
		//$('.menu-osx').contextMenu(menu,{theme:'osx',beforeShow:beforeShowFunc});
		//$('.menu-human').contextMenu(menu,{theme:'human',beforeShow:beforeShowFunc});
		//$('.menu-gloss').contextMenu(menu,{theme:'gloss',beforeShow:beforeShowFunc});
		//$('.menu-gloss-cyan').contextMenu(menu,{theme:'gloss,gloss-cyan',beforeShow:beforeShowFunc});
		//$('.menu-gloss-semitransparent').contextMenu(menu,{theme:'gloss,gloss-semitransparent',beforeShow:beforeShowFunc});
	});
	var menu1 = [ 
		{'Delete':function(menuItem,menu) { $(this).remove(); } },
		{ '<b>Edit</b> <input type="text" class="editableText" value="test"/><span color="grey">Update</span>': 
			function(menuItem,cmenu,e) {
				var textBox = $(menuItem).find(".editableText");
		        $(this).children().each(function(i) {
		            var type = this.type;
		            var tag = this.tagName.toLowerCase(); // normalize case
					
		            if (tag == 'span'){
			            this.innerHTML = textBox[0].value;
		            }
		            // We are only concernd with first elemtnt so break after processing first element
		            return false;
		          });
		        return false;
			}
		},
		$.contextMenu.separator, {'<div><div style="float:left;">Choose a color (don\'t close):</div><div class="swatch" style="background-color:red"></div><div class="swatch" style="background-color:green"></div><div class="swatch" style="background-color:blue"></div><div class="swatch" style="background-color:yellow"></div><div class="swatch" style="background-color:black"></div></div><br>':
		function(menuItem,cmenu,e) {
			$t = $(e.target);
			if ($t.is('.swatch')) {
				this.style.backgroundColor = $t.css('backgroundColor');
				$t.parent().find('.swatch').removeClass('swatch-selected');
				$t.addClass('swatch-selected');
			}
			return false;
		}
	}
		]; 	


    function clearForm(form) {
        // iterate over all of the inputs for the form
        // element that was passed in
        $(':input', form).each(function() {
          var type = this.type;
          var tag = this.tagName.toLowerCase(); // normalize case
          // it's ok to reset the value attr of text inputs,
          // password inputs, and textareas
          if (type == 'text' || type == 'password' || tag == 'textarea')
				this.value = "";
          // checkboxes and radios need to have their checked state cleared
          // but should *not* have their 'value' changed
          else if (type == 'checkbox' || type == 'radio')
            this.checked = false;
          // select elements need to have their 'selectedIndex' property set to -1
          // (this works for both single and multiple select elements)
          else if (tag == 'select')
            this.selectedIndex = -1;
        });
      };

	
</script>	



	
	<script type="text/javascript">
	
	
	
	function enableDrag(dragContainment,draggableClass,resizable){
        //Make element draggable and resizable
		$(draggableClass).click(
			function(event) {
				if (event.ctrlKey) {
					$(this).toggleClass('grouped');
				}				
			}	
		);			

		$(draggableClass).find(".menu-vista").contextMenu(menu,{theme:'vista',beforeShow:beforeShowFunc});
		$(draggableClass).contextMenu(menu1,{theme:'vista'});
		
		var element;
		
		if(resizable=="true"){
			element = $(draggableClass).corner().resizable();
		}else{
			element = $(draggableClass).corner();
		}
		
		
		
		if(element.hasClass("containerdiv")){
		
			//Make element droppable
			element.droppable({greedy: true,
				out: function(event, ui) { 
					
					var element=$(ui.draggable);
					if(!element.hasClass("containerdiv")){
						$(this).parent().append(element);	
					}					
				},
				drop: function(ev, ui) {
					if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
						var element=$(ui.draggable);
							counter++;

							element=$(ui.draggable).clone();
							//alert(element);
							element.addClass("tempclass");
							
							$(this).append(element);
							
							$(".tempclass").attr("id","clonediv"+counter);
							$("#clonediv"+counter).removeClass("tempclass");

							//Get the dynamically item id
							draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
							//itemDragged = "dragged" + RegExp.$1
							////console.log(itemDragged)
							itemDragged = "dragged";

							$("#clonediv"+counter).addClass(itemDragged);
							
							
						
							enableDrag("frame","#clonediv"+counter,"true");
							 

					}else{
						var element=$(ui.draggable);
						//console.log(element.html());
						$(this).append(element);
					}
				}
			});
		
		}
		
		
		
        element.draggable({
            helper:'clone',
            containment: dragContainment,

			start : function(event, ui) {
				posTopArray = [];
				posLeftArray = [];
				thisElem = $(this);
				
				if ($(this).hasClass("grouped")) { // Loop through each element and store beginning start and left positions
				
					$(".grouped").each(function(i) {
						thiscsstop = $(this).css('top');
						if (thiscsstop == 'auto')
							thiscsstop = 0; // For IE

						thiscssleft = $(this).css('left');
						if (thiscssleft == 'auto')
							thiscssleft = 0; // For IE

						posTopArray[i] = parseInt(thiscsstop);
						posLeftArray[i] = parseInt(thiscssleft);
					});
					}

				begintop = $(this).offset().top; // Dragged element top position
				beginleft = $(this).offset().left; // Dragged element left position
			},	

			drag : function(event, ui) {
				var topdiff = $(this).offset().top - begintop; // Current distance dragged element has traveled vertically
				var leftdiff = $(this).offset().left - beginleft; // Current distance dragged element has traveled horizontally
				
				
				var draggingId = $(this).attr("id");
				if ($(this).hasClass("grouped")) {
					////console.log("Initial pos   "+begintop +"   Left----"+beginleft);
					////console.log("Diff Value is   "+topdiff +"   Left----"+leftdiff);
					$(".grouped").each(function(i) {
						if(draggingId === $(this).attr("id")){
							topdiff = $(this).offset().top - begintop; // Current distance dragged element has traveled vertically
							leftdiff = $(this).offset().left - beginleft; // Current distance dragged element has traveled horizontally
						}
					});
					
					$(".grouped").each(function(i) {
						////console.log("Pres pos for  "+$(this).attr('id')+"   is   "+posTopArray[i] +"   Left----"+posLeftArray[i]);
						if(draggingId !== $(this).attr("id")){
							$(this).css('top', posTopArray[i] + topdiff); // Move element veritically - current css top + distance dragged element has travelled vertically
							$(this).css('left', posLeftArray[i] + leftdiff); // Move element horizontally - current css left + distance dragged element has travelled horizontally
						}
					});					
					
				}
			},
			
            //When first dragged
            stop:function(ev, ui) {
            	var pos=$(ui.helper).offset();
            	objName = "#clonediv"+counter
				var draggingId = $(this).attr("id");
				
				var leftValue = pos.left;
				var topValue = pos.top;
				
				/**
				* The below if loop is written to fix the relative and abosiulte positioning issue.
				* When any draggable object is dropped into a droppable container which resides in another container then the droppable with more z-index becomes relative positining for its sub elements
				*/
				if($(this).parent().hasClass("containerdiv")){
					//console.log("Left Pos   "+leftValue);
					//console.log("Top Pos   "+topValue);
					//console.log("$(this).parent().attr('left')   "+$(this).parent().offset().left);
					//console.log("$(this).parent().offset().top  "+$(this).parent().offset().top);				
					leftValue = pos.left-$(this).parent().offset().left;
					topValue = pos.top -$(this).parent().offset().top;
				}
				
				if ($(this).hasClass("drag")) {
					$(objName).css({"left":leftValue,"top":topValue});
					$(objName).removeClass("drag");					
				
				}else{
					objName = draggingId;
					thisElem.css({"left":leftValue,"top":topValue});
				}
				

				//console.log("Left Pos   "+leftValue);
				//console.log("Top Pos   "+topValue);
				
				var topdiff = $(this).offset().top - begintop; // Current distance dragged element has traveled vertically
				var leftdiff = $(this).offset().left - beginleft; // Current distance dragged element has traveled horizontally
				
				// This logic for Group Elements
				
				if ($(this).hasClass("grouped")) {
					////console.log("Initial pos   "+begintop +"   Left----"+beginleft);
					////console.log("Diff Value is   "+topdiff +"   Left----"+leftdiff);
					$(".grouped").each(function(i) {
						if(draggingId === $(this).attr("id")){
							topdiff = $(this).offset().top - begintop; // Current distance dragged element has traveled vertically
							leftdiff = $(this).offset().left - beginleft; // Current distance dragged element has traveled horizontally
						}
					});
					
					$(".grouped").each(function(i) {
						////console.log("Pres pos for  "+$(this).attr('id')+"   is   "+posTopArray[i] +"   Left----"+posLeftArray[i]);
						if(draggingId !== $(this).attr("id")){
							$(this).css('top', posTopArray[i] + topdiff); // Move element veritically - current css top + distance dragged element has travelled vertically
							$(this).css('left', posLeftArray[i] + leftdiff); // Move element horizontally - current css left + distance dragged element has travelled horizontally
						}
					});					
					
				}				
				

            }
        });
	
	}
	
    $(document).ready(function(){
	

        //Counter
        counter = 0;
				
		
        //Make element draggable
        //$(".dragged").resizable().draggable();		
		enableDrag("frame",".drag","false");
		
		//$(".drag").corner();
		
		
		
        //Make element droppable
        $("#frame").droppable({
			drop: function(ev, ui) {
				if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
					counter++;
					var element=$(ui.draggable).clone();
					
					//alert(element);
					element.addClass("tempclass");
					
					$(this).append(element);
					
					$(".tempclass").attr("id","clonediv"+counter);
					$("#clonediv"+counter).removeClass("tempclass");

					//Get the dynamically item id
					draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
					//itemDragged = "dragged" + RegExp.$1
					////console.log(itemDragged)
					itemDragged = "dragged";

					$("#clonediv"+counter).addClass(itemDragged);
					
					
				
					enableDrag("parent","#clonediv"+counter,"true");
					 
				}
        	}
        });
    });

	function alertHTML(){
		var htmlClone = $("#frame").clone();
	
		alert("<html><head></head><body>"+htmlClone.html()+"</body></html>");
	}
	
	
	
	</script>



</head>

<body>

<div id="wrapper">
	<div id="options">
		<div id="drag1" class="drag"><input type="text" value="test" style="width:80%;height:80%;"></input></div> <!-- end of drag1 -->
		<form id="drag2" class="drag containerdiv">	
			
			<div style="" class="context-menu context-menu-theme-vista context-menu-example-trigger menu-vista">
				<div class="context-menu-item">
					<div class="context-menu-item-inner">Form Container</div>
				</div>
			</div>

		</form> <!-- end of drag2 -->
		<div id="drag3" class="drag"><input type="button" value="Custom Button"/></div> <!-- end of drag3 -->
		<div id="drag4" class="drag"><textarea name="userInput" style="width:90%;height:90%;"></textarea> </div> <!-- end of drag1 -->
		<div id="drag5" class="drag">
					<select>
						  <option>Small
						  <option selected="true">Medium
						  <option>Large
						  <option>X-Large
						</select>
		</div> <!-- end of drag1 -->
		<div id="drag6" class="drag"><span class="blue">Your Label here</span></div> <!-- end of drag3 -->
		<div id="drag7" class="drag containerdiv">
			<fieldset style="width:100%;height:90%;">
			    <legend>Personalia:</legend>
			    Sample Content
    		</fieldset>
    	</div>
		
		<input type="button" value="spithtml" onclick="alertHTML()"/>
	</div><!-- end of options -->
	<div id="frame">
		<table id="tbldevs" border="0"><tbody><tr><td></td><td></td><td></td><td></td></tr></tbody></table></div><!-- end of frame -->
</div><!-- end of wrapper -->

<div style="display: none;" id="templates">
	<div id="img_div_tpl" class="img_start">
		<img src="demo1.php_files/black_reuben.png" class="img_img_start">
		<div class="delete">&nbsp;</div>
		<div class="dragger">&nbsp;</div>
	</div>
	<div id="txt_div_tpl" class="txt_start">
		<textarea class="txt_area_start">test.</textarea>
		<div class="delete">&nbsp;</div>
		<div class="dragger">&nbsp;</div>
	</div>
</div>

</body>
</html>